<template>
  <div class="container" v-loading="dataInfoLoading">
    <el-row>
      <div class="top-box" v-if="showNew">
        <el-button v-if="isBlack" size="mini" type="primary" @click="handleBlack(0)">移出黑名单</el-button>
        <el-button v-else size="mini" type="danger" @click="handleBlack(1)">加入黑名单</el-button>
        <div class="line">
          <span style="margin-left: 16px; margin-right: 6px; line-height: 20px">数据评分:</span>
          <el-rate v-model="score" :allow-half="true" @change="handleScoreChange"></el-rate>
        </div>
      </div>
      <el-col :span="24">
        <div class="content_l">
          <ul class="list_content">
            <li class="list_item relative">
              <dl class="list_item_l" :gutter="24">
                <dt>
                  <h3 v-if="companyName">{{ companyName }}</h3>
                  <em v-if="companyStatus">{{ companyStatus }}</em>
                </dt>
                <el-col class="inline_block" :span="24">
                  <span class="label">企业简介：</span>
                  <span class="val desc" v-html="companyInfo.company_desc"></span>
                </el-col>
                <el-col class="inline_block" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="item in companyInfo.lx" :key="item.id">
                  <span class="label">{{ item.key }}</span>
                  <span class="val">{{ replaceVal(item.val) }}</span>
                </el-col>
              </dl>
              <!-- 用户状态标签和操作按钮 -->
              <div class="list_item_r" v-if="parseInt(companyInfo.sts) === 0">
                <div class="customer-sts">未跟踪</div>
              </div>
              <div class="list_item_r" v-else-if="parseInt(companyInfo.sts) === 1">
                <div class="customer-sts">申领中</div>
              </div>
              <div class="list_item_r" v-else-if="parseInt(companyInfo.sts) === 2">
                <!-- 2024.11.8 跟踪流程不要了 -->
                <!-- <el-button size="mini" type="primary" style="margin-top: 50px" @click="handleFollow">跟踪</el-button> -->
                <div class="customer-sts">已申领</div>
              </div>
              <div class="list_item_r" v-else-if="parseInt(companyInfo.sts) === 3">
                <!-- 2024.11.8 跟踪流程不要了 -->
                <!-- <el-button size="mini" type="primary" style="margin-top: 50px" @click="formName">添加跟踪记录</el-button> -->
                <div class="customer-sts">跟踪中</div>
              </div>
              <div class="list_item_r" v-else>
                <el-button size="mini" type="primary" style="margin-top: 50px" @click="handleRestore">恢复</el-button>
                <div class="customer-sts">无效客户</div>
              </div>
            </li>
          </ul>
          <div class="label-box" style="margin-top: 12px" v-if="showNew">
            <el-tag :key="tag" v-for="tag in labelList" closable :disable-transitions="false" @close="handleClose(tag)">
              {{ tag }}
            </el-tag>
            <el-input class="input-new-tag" v-if="showTagInput" v-model="inputTagValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"> </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="handelShowTagInput">+ 添加新标签</el-button>
          </div>
          <!-- 添加标签 -->
          <div style="margin-top: 12px">
            <el-tag size="small" :key="tag.id" v-for="tag in dynamicTags" :disable-transitions="false" class="tagLi">
              {{ tag.name }}
            </el-tag>
          </div>
          <!-- nav列表 -->
          <div class="nav_centent">
            <ol class="nav" :class="{ fixedNavbar: isfixTab }">
              <li v-for="(todo, index) in tablist" @click="changeTab(index)" :class="{ active: index == current }" :key="todo.text">
                {{ todo.text }}
              </li>
            </ol>
          </div>
          <!-- list -->
          <div class="hid-scroll-bar">
            <div class="scroll-box" id="scroll-box">
              <!-- 工商信息 -->
              <div class="list1 list" v-if="current == 0">
                <div class="title">
                  <h2>工商信息</h2>
                </div>
                <div class="content" v-if="infolist.id">
                  <dl style="border: none; width: 30%">
                    <dd>企业法人：{{ infolist.boss_name }}</dd>
                    <dd>企业经营状态：{{ infolist.opera_sts }}</dd>
                    <dd>成立日期：{{ infolist.register_date }}</dd>
                    <dd>纳税人资质：{{ infolist.taxpayer }}</dd>
                    <dd>行业：{{ infolist.industry }}</dd>
                    <dd>经营范围：{{ infolist.management_model }}</dd>
                  </dl>
                  <dl style="border: none; width: 30%">
                    <dd>统一社会信用代码：{{ infolist.un_cid }}</dd>
                    <dd>营业期限：{{ infolist.opera_term }}</dd>
                    <dd>注册资本：{{ infolist.register_cap }}</dd>
                    <dd>企业类型：{{ infolist.company_type }}</dd>
                    <dd>注册地址：{{ infolist.company_address }}</dd>
                    <dd>主营产品：{{ infolist.main_products }}</dd>
                  </dl>
                </div>
              </div>
              <!-- 联系人信息 -->
              <div class="list list2" style="" v-else-if="current == 1">
                <el-button size="mini" type="primary" @click="addContact" style="margin: 10px">
                  <i class="el-icon-plus"></i>
                  添加联系方式</el-button
                >
                <div class="content" v-if="infolist.length > 0">
                  <dl v-for="item in infolist" :key="item.company_phone" class="contact-item">
                    <div class="button-box">
                      <el-button size="mini" plain type="primary" @click="setMainContact(item)">设为主联系方式</el-button>
                      <el-button size="mini" plain type="danger" @click="deleteContact(item)">删除联系方式</el-button>
                    </div>
                    <dt>联系人信息</dt>
                    <dd class="flex">
                      <span style="padding-left: 12px">姓名：{{ item.contact_name }}</span>
                      <span>性别：{{ item.sex == 0 ? '未录入' : item.sex == 1 ? '男' : '女' }}</span>
                    </dd>
                    <dd class="flex">
                      <span style="padding-left: 12px">职务：{{ item.office }}</span>
                      <span>电话：{{ item.company_phone }}</span>
                    </dd>
                    <dd class="flex">
                      <span style="padding-left: 12px">微信号：{{ item.wx_code }}</span>
                      <span>QQ号：{{ item.qq_code }}</span>
                    </dd>
                    <dd>
                      <span style="padding-left: 12px">邮箱：{{ item.email }}</span>
                    </dd>
                    <dt>AI外呼记录</dt>
                    <dd>
                      <span style="margin-right: 30px; display: inline-block; width: 80px; text-indent: 1em">{{ item.num_ai }}条</span> <el-button size="mini" type="primary" @click="Aisms(item, 1)">查看</el-button>
                    </dd>
                    <dt>短信营销记录</dt>
                    <dd>
                      <span style="margin-right: 30px; display: inline-block; width: 80px; text-indent: 1em">{{ item.num_sms }}条</span> <el-button size="mini" type="primary" @click="Aisms(item, 2)">查看</el-button>
                    </dd>
                    <dt>人工跟踪记录</dt>
                    <dd>
                      <span style="margin-right: 30px; display: inline-block; width: 80px; text-indent: 1em">{{ item.num_follow }}条</span> <el-button size="mini" type="primary" @click="Aisms(item, 3)">查看</el-button>
                    </dd>
                  </dl>
                </div>
              </div>
              <!-- Ai外呼记录 -->
              <div class="list list3" style="" v-else-if="current == 2">
                <div class="title">
                  <h2>AI外呼记录</h2>
                  <div class="search">
                    <el-input v-model="Aiinput" style="width: 70%" placeholder="请输入联系人名称/手机号"></el-input>
                    <el-button size="mini" type="primary" @click="searchBtn(current)"><i class="el-icon-search" style="margin-right: 5px"></i>搜索</el-button>
                  </div>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <ul>
                    <li v-for="item in infolist" :key="item.id">
                      <dl>
                        <dd class="flex">
                          <span>通话记录ID：{{ item.ai_instance_id }}</span>
                          <span>联系人：{{ item.company_boss }}</span>
                        </dd>
                        <dd class="flex">
                          <span>联系电话：{{ item.company_phone }}</span>
                          <span>归属地：{{ item.phone_address }}</span>
                        </dd>
                        <dd class="flex">
                          <span>意向标签：{{ item.talk_sts }}级</span>
                          <span>通话录音：{{ item.talk_seconds }}秒<i class="el-icon-video-play" @click="item.talk_seconds != 0 ? open(item) : ''" style="margin-left: 10px"></i></span>
                        </dd>
                        <dd class="flex">
                          <span>通话开始时间：{{ item.talk_start_time }}</span>
                          <span>通话结束时间：{{ item.talk_end_time }}</span>
                        </dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 短信营销记录 -->
              <div class="list list4" style="" v-else-if="current == 3">
                <div class="title">
                  <h2>短信营销记录</h2>
                  <div class="search">
                    <el-input v-model="dxinput" style="width: 70%" placeholder="请输入联系人名称/手机号"></el-input>
                    <el-button size="mini" type="primary" @click="searchBtn(current)"><i class="el-icon-search" style="margin-right: 5px"></i>搜索</el-button>
                  </div>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <ul>
                    <li v-for="item in infolist" :key="item.id">
                      <dl>
                        <dd class="flex">
                          <span>短信模板ID：{{ item.sms_id }}</span>
                          <span>批次号：{{ item.batch }}</span>
                        </dd>
                        <dd class="flex">
                          <span>联系人：{{ item.company_boss }}</span>
                          <span>联系电话：{{ item.company_phone }}</span>
                        </dd>
                        <dd class="flex">
                          <span>发送时间：{{ item.send_time }}</span>
                          <span>发送状态：{{ item.resp_sts == 1 ? '未发送' : item.resp_sts == 2 ? '成功' : '失败' }}</span>
                        </dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 人工跟踪记录 -->
              <div class="list list5" style="" v-else-if="current == 4">
                <div class="title">
                  <h2>人工跟踪记录</h2>
                  <div class="search">
                    <el-input v-model="rginput" style="width: 70%" placeholder="请输入联系人名称/手机号"></el-input>
                    <el-button size="mini" type="primary" @click="searchBtn(current)"><i class="el-icon-search" style="margin-right: 5px"></i>搜索</el-button>
                  </div>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <ul>
                    <li v-for="(item, index) in infolist" :key="index.toString()">
                      <dl>
                        <dd class="flex">
                          <span>联系人：{{ item.contact_name }}</span>
                          <span>联系电话：{{ item.contact_phone }}</span>
                        </dd>
                        <dd class="flex">
                          <span>跟踪人：{{ item.follow_man }}</span>
                          <span>跟踪时间：{{ item.follow_time }}</span>
                        </dd>
                        <dd class="flex">
                          <span>意向标签：{{ item.talk_sts }}级</span>
                          <span>备注：{{ item.desc }}</span>
                        </dd>
                        <dd class="flex">
                          <span>回访提醒：{{ item.next_alarm_date }}</span>
                        </dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 信息发布记录 -->
              <div class="list list5" style="" v-else-if="current == 5">
                <div class="title">
                  <h2>信息发布记录</h2>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <ul>
                    <li v-for="(item, index) in infolist" :key="index.toString()">
                      <dl>
                        <dd class="flex">
                          <el-tooltip class="item" effect="dark" :content="item.Title" placement="top">
                            <a :href="item.url" target="_blank">
                              <span style="width: 100%">信息标题：{{ item.Title }}</span>
                            </a>
                          </el-tooltip>
                        </dd>
                        <dd class="flex">
                          <span>关键词：{{ item.KeyWord }}</span>
                        </dd>
                        <dd class="flex">
                          <span>发布时间：{{ item.FbDate }}</span>
                          <span>地址：{{ item.ComAddress }}</span>
                        </dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 营销群 -->
              <div class="list list5" style="" v-else-if="current == 6">
                <div class="title">
                  <h2>营销群</h2>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <div class="group-list">
                    <div class="group-item" v-for="item in infolist" :key="item">
                      <span>{{ item }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 数据来源 -->
              <div class="list list5" style="" v-else-if="current === 7">
                <div class="title">
                  <h2>数据来源</h2>
                </div>
                <div class="content" v-if="infolist.length > 0">
                  <dl style="border: none; width: 30%">
                    <dd class="flex" v-for="item in infolist" :key="item.id">
                      <span>渠道：{{ item.source }}</span>
                      <span style="width: 55%">时间：{{ item.created_time }}</span>
                    </dd>
                  </dl>
                </div>
              </div>
              <!-- 历史处置记录 -->
              <div class="list list5" style="" v-else-if="current === 8">
                <div class="title">
                  <h2>历史处置记录</h2>
                </div>
                <div v-if="infolist.length > 0">
                  <br />
                  <!--数据信息-->
                  <el-table :data="infolist" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%">
                    <el-table-column align="center" header-align="center" label="标题" prop="Title"></el-table-column>
                    <el-table-column align="center" header-align="center" label="详情" prop="Description" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <div v-html="handleFormat(scope.row.Description)"></div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" header-align="center" label="地址" prop="ComAddress"></el-table-column>
                    <el-table-column align="center" header-align="center" label="关键词" prop="KeyWord"></el-table-column>
                    <el-table-column align="center" header-align="center" label="时间" prop="FbDate"></el-table-column>
                    <el-table-column align="center" fixed="right" header-align="center" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleDetail(scope)">详情</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination
                    small
                    background
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="totalPage"
                    @current-change="currentChangeHandle"
                    @size-change="sizeChangeHandle"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="margin-top: 20px; text-align: right; margin-bottom: 10px"
                  ></el-pagination>
                </div>
              </div>
              <div v-if="infolist.length <= 0" style="text-align: center">暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--  Ai外呼记录-->
    <el-dialog title="AI外呼记录" :visible.sync="AIVisible" :destroy-on-close="true">
      <div class="AIinfo">
        <audio :src="Aiinfo.talk_mp3" controls ref="audio"></audio>
        <ul v-for="item in Aiinfo.content" :key="item.id">
          <li :style="item.speaker == 'ME' ? 'text-align:right' : ''">{{ item.content }}</li>
        </ul>
      </div>
    </el-dialog>
    <!-- 2024.11.8 跟踪流程不要了 -->
    <!-- 添加跟踪记录 -->
    <!-- <el-dialog title="添加跟踪记录" :visible.sync="tracerecord" destroy-on-close>
      <tracerecord @formName="formName"></tracerecord>
    </el-dialog> -->
    <!-- 添加联系方式 -->
    <el-dialog title="添加联系方式" :visible.sync="showDialogAddPhone" destroy-on-close append-to-body>
      <addPhone :id="id" @success="handleAddPhoneSuccess" @close="showDialogAddPhone = false"></addPhone>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiUniLabelAdd, // 添加标签
  apiUniAddBlack, // 加入黑名单
  apiUniMarkScore, // 评分
  companyInfoDescApi, //详情接口
  company_business, // 公司详情工商信息
  company_people, //公司详情联系人详情
  company_ai_record, //ai外呼记录，
  ai_talk_record, //Ai外呼详情
  company_sms_record, //短息营销记录，
  company_follow_record, //人工跟踪记录，
  company_source, //信息来源
  company_labels, //标签选择数据回显
  ai_task_add_black,
  apiFollowChange,
  apiPublishList,
  apiGroupList,
  apiCRMHistory,
  apiDelPhone,
  apiSetMainPhone,
} from '@/api/customer'
// <!-- 2024.11.8 跟踪流程不要了 -->
// import tracerecord from './tracerecord' //添加跟踪记录
import { formatFormData } from '@/utils'
import addPhone from './addPhone.vue'

export default {
  name: 'detail',
  components: {
    addPhone,
  },
  props: {
    page: String,
    id: String,
    tab: Number,
    row: Object,
  },
  data() {
    return {
      showNew: false,
      labelList: [],
      showTagInput: false,
      inputTagValue: '',
      isBlack: 0,
      score: 0, // 评分
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tablist: [
        { text: '工商信息' },
        { text: '联系人信息' },
        { text: 'AI外呼记录' },
        { text: '短信营销记录' },
        { text: '人工跟踪记录' },
        // { text: '会员购买记录' },
        { text: '信息发布记录' },
        // { text: '客户分群' },
        { text: '营销群' },
        { text: '数据来源' },
        { text: '历史处置记录' },
      ],
      link: {
        0: company_business,
        1: company_people,
        2: company_ai_record,
        3: company_sms_record,
        4: company_follow_record,
        5: apiPublishList,
        6: apiGroupList,
        7: company_source,
        8: apiCRMHistory,
      },
      dynamicTags: [], //添加标签
      current: 0, //列表选中状态
      companyInfo: [], // 详情工商信息
      infoRecords: [], //信息发布记录
      isfixTab: false,
      companyName: null, //title
      companyStatus: null, //经营信息
      dataInfoLoading: false,
      //   列表
      infolist: [],
      AIVisible: false, //Ai外呼记录弹出层
      tracerecord: false, //追踪记录弹出层
      Aiinfo: {}, //AI外呼记录详情
      txtKey: '', //搜索 input
      Aiinput: '', //Aiinput
      dxinput: '', //短信input
      rginput: '', //短信input
      inited: false, // 是否初始化
      showDialogAddPhone: false,
    }
  },
  mounted() {
    if (this.page === 'plasticCustomer' || this.page === 'recurringCustomer') {
      this.showNew = true
      this.score = this.row.score / 2
      this.isBlack = this.row.is_black
      this.labelList = this.row.labels.length > 0 ? this.row.labels.split('、') : []
    }
    this.getDataDesc()
    this.labels()
  },
  methods: {
    // 初始化
    init() {
      if (this.tab) {
        this.changeTab(this.tab)
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.infData(8)
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.infData(8)
    },
    labels() {
      company_labels({ id: this.id }).then((res) => {
        this.dynamicTags = res.data
      })
    },
    changeTab(index) {
      this.current = index
      this.infData(index)
    },
    // 获取详情数据
    getDataDesc() {
      this.dataInfoLoading = true
      const info = { id: this.id }
      companyInfoDescApi(info)
        .then((res) => {
          this.companyInfo = res.data
          this.companyName = res.data.gs.find((u) => u.key == '法人名称：').val
          this.companyStatus = res.data.gs.find((u) => u.key == '经营状态：').val
          this.dataInfoLoading = false
          this.infData(0)
        })
        .catch((e) => {
          this.companyInfo = []
          this.companyName = null
          this.companyStatus = null
          this.dataInfoLoading = false
        })
    },
    // // 列表回显
    infData(num, search) {
      if (num === 8) {
        const phone = this.companyInfo.lx.find((item) => item.key === '联系电话：')
        if (!phone) {
          return
        }
        let data = {
          phone: phone.val,
          pageSize: this.pageSize,
          pageNumber: this.pageIndex,
        }
        const formData = new FormData()
        for (let key in data) {
          formData.set(key, data[key])
        }
        this.link[num](formData)
          .then((res) => {
            if (res.result) {
              this.infolist = res.result.items
              this.totalPage = res.result.total
            } else {
              this.infolist = res.data
            }
          })
          .catch((e) => {
            console.log(e)
          })
      } else {
        let data = {
          id: this.id,
          search: search == undefined ? '' : search,
        }
        if (num === 5) {
          let phone = this.companyInfo?.lx.find((item) => item.key.includes('联系电话'))?.val
          data = {
            company_phone: phone,
            // company_phone: '15962615082',
            search: search == undefined ? '' : search,
          }
        }
        this.link[num](data)
          .then((res) => {
            if (res.result) {
              this.infolist = res.result.items
            } else {
              this.infolist = res.data
            }
            if (!this.inited && num === 0) {
              this.inited = true
              this.init()
            }
          })
          .catch((e) => {
            console.log(e)
          })
      }
    },
    // 校验
    replaceVal(val) {
      if (val.includes('//cp.11467.com/home/clearmobile/index/phone/')) {
        return val.replace('//cp.11467.com/home/clearmobile/index/phone/', '')
      } else if (val.includes('//wpa.qq.com/msgrd')) {
        var regex = /uin=(\d+)/
        var match = val.match(regex)
        return match ? match[1] : null
      }
      return val
    },
    // 联系人信息 AI外呼， 短信营销， 人工跟踪记录
    Aisms(item, num) {
      var phone = item.company_phone

      if (num == 1) {
        this.infData(2, phone)
        this.current = 2
      } else if (num == 2) {
        this.infData(3, phone)
        this.current = 3
      } else {
        this.infData(4, phone)
        this.current = 4
      }
    },

    // AI外呼记录弹出层
    open(item) {
      this.AIVisible = true
      ai_talk_record({ id: item.id }).then((res) => {
        this.Aiinfo = res.data
      })
    },
    // 搜索
    searchBtn(index) {
      // 所有的input
      var key = {
        2: this.Aiinput,
        3: this.dxinput,
        4: this.rginput,
      }
      this.infData(index, key[index])
    },
    // 添加标签弹出层
    cancel(e) {
      console.log(e)
    },
    // 添加跟踪记录弹出层
    formName(sts) {
      if (this.tracerecord != false) {
        //  this.getDataDesc();
        this.labels()
        this.infData(this.current)
        this.companyInfo.sts = sts
      }
      this.tracerecord = !this.tracerecord
    },
    // 跟踪
    handleFollow() {
      this.dataInfoLoading = true
      apiFollowChange({
        id: this.id,
      })
        .then((res) => {
          this.dataInfoLoading = false
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            this.companyInfo.sts = 3
          }
        })
        .catch(() => {
          this.dataInfoLoading = false
        })
    },
    // 恢复
    handleRestore() {
      this.dataInfoLoading = true
      let info = {
        id: this.id,
        sts: '0',
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      ai_task_add_black(formData)
        .then((res) => {
          this.dataInfoLoading = false
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '恢复成功!',
            })
            this.companyInfo.sts = 0
          }
        })
        .catch(() => {
          this.dataInfoLoading = false
        })
    },
    // 格式化描述
    handleFormat(str) {
      let arrEntities = {
        lt: '<',
        gt: '>',
        nbsp: ' ',
        amp: '&',
        quot: '"',
      }
      return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
        return arrEntities[t]
      })
    },
    // 详情
    handleDetail(scope) {
      window.open('https://jituan.feijiu.net' + scope.row.HtmlUrl)
    },
    handleBlack(sts) {
      apiUniAddBlack(
        formatFormData({
          id: this.id,
          sts,
        })
      ).then((res) => {
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.isBlack = sts
        this.$emit('change', { type: 'is_black', value: sts })
      })
    },
    handleScoreChange() {
      apiUniMarkScore(
        formatFormData({
          id: this.id,
          score: parseInt(this.score * 2),
        })
      ).then((res) => {
        this.$message({
          type: 'success',
          message: '操作成功!',
        })
        this.$emit('change', { type: 'score', value: parseInt(this.score * 2) })
      })
    },
    // 删除标签
    handleClose(tag) {
      apiUniLabelAdd(
        formatFormData({
          id: this.id,
          mark: tag,
          action: 0,
        })
      ).then((res) => {
        this.labelList.splice(this.labelList.indexOf(tag), 1)
        this.$emit('change', { type: 'labels', value: this.labelList.join('、') })
      })
    },
    handelShowTagInput() {
      this.showTagInput = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 添加标签
    handleInputConfirm() {
      let inputTagValue = this.inputTagValue
      if (inputTagValue === '') {
        this.showTagInput = false
        return
      }
      if (this.labelList.includes(inputTagValue)) {
        this.$message.error('标签已存在')
        return
      }
      apiUniLabelAdd(
        formatFormData({
          id: this.id,
          mark: inputTagValue,
          action: 1,
        })
      ).then((res) => {
        this.labelList.push(inputTagValue)
        this.showTagInput = false
        this.inputTagValue = ''
        this.$emit('change', { type: 'labels', value: this.labelList.join('、') })
      })
    },
    // 添加联系方式
    addContact() {
      this.showDialogAddPhone = true
    },
    // 删除联系方式
    deleteContact(item) {
      this.$confirm('此操作将永久删除该联系方式, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        apiDelPhone(
          formatFormData({
            id: this.id,
            phone: item.company_phone,
          })
        )
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.infData(this.current)
          })
          .catch(() => {})
      })
    },
    // 设为主联系方式
    setMainContact(item) {
      this.$confirm('确定设置为主要联系方式?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        apiSetMainPhone(
          formatFormData({
            id: this.id,
            company_phone: item.company_phone,
          })
        )
          .then((res) => {
            this.$message({
              type: 'success',
              message: '设置成功!',
            })
            this.infData(this.current)
          })
          .catch(() => {})
      })
    },
    handleAddPhoneSuccess() {
      this.showDialogAddPhone = false
      this.infData(this.current)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: #f0f1f4;
  min-height: 100%;
  .content_l {
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
    .list_content {
      width: 100%;
      padding: 0;
      margin: 0;
      .list_item {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .list_item_l {
          width: 100%;
          margin: 0;
          dt {
            margin-bottom: 20px;
            h3 {
              color: #2c68ff;
              font-size: 16px;
              display: inline-block;
              margin: 0 10px 0 0;
              font-weight: 500;
            }
            em {
              color: #ffb561;
              font-size: 12px;
              border: 1px solid #ffb561;
              border-radius: 2px;
              font-style: normal;
              padding: 1px 6px;
            }
          }
          .inline_block {
            line-height: 1.5;
            margin: 0 0 16px 0;
            display: flex;
            .label {
              color: #8c8c8c;
            }
            .val {
              color: #262626;
              display: inline-block;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              vertical-align: sub;
              flex: 1;
              &.desc {
                overflow: visible;
                white-space: wrap;
              }
            }
            &:last-child,
            &:nth-last-child(2) {
              // margin: 0;
            }
          }
        }
        .list_item_r {
          text-align: center;
        }
      }
    }
    .nav_centent {
      width: 100%;
      .nav {
        width: 100%;
        font-size: 12px;
        color: #333333;
        font-weight: bold;
        background: #f0f1f4;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid #e2e2e2;
        li {
          padding: 0 20px;
          line-height: 50px;
          position: relative;
          cursor: pointer;
          border: 1px solid #e2e2e2;
          border-right: none;
          border-bottom: none;
          &:last-child {
            border-right: 1px solid #e2e2e2;
          }
          &.active {
            font-weight: 600;
            color: #2c68ff;
            background: #ffffff;
            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: -2px;
              width: 100%;
              height: 2px;
              background: #ffffff;
            }
          }
        }
      }
      .fixedNavbar {
        position: fixed;
        top: 83px;
        right: 0;
        box-shadow: none;
        z-index: 99999;
        background: #fff;
        width: calc(100% - 210px);
        height: 50px;
        li {
          margin-top: 13px;
        }
      }
    }
    .scroll-box {
      min-height: 400px;
      border: 1px solid #e2e2e2;
      border-top: none;
    }
    .list {
      padding-top: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
          margin: 0;
          padding: 0;
          position: relative;
          padding-left: 10px;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .content {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        dl {
          margin: 0;
          width: 50%;
          border-radius: 4px;
          padding: 18px 16px;
          box-sizing: border-box;
          margin-bottom: 16px;
          &:nth-child(2n) {
            border-left: 1px dashed #e2e2e2;
          }
          dt {
            margin: 0;
            padding: 0;
            position: relative;
            padding-left: 10px;
            margin-bottom: 10px;
            font-weight: bold;
          }
          dd {
            padding: 0;
            padding-left: 10px;
            margin-left: 0;
            line-height: 1.7em;
            margin-bottom: 10px;
          }
          .flex {
            display: flex;
            justify-content: space-between;
            span {
              width: 40%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        ul {
          width: 100%;
          padding: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            list-style: none;
            width: 50%;
            margin-bottom: 10px;
            &:nth-child(2n) {
              border-left: 1px dashed #e2e2e2;
            }
            dl {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.tagLi {
  margin-right: 10px;
}
.AIinfo {
  text-align: center;
  height: 500px;
  overflow: auto;
}
.AIinfo audio {
  width: 100%;
}
.AIinfo ul {
  list-style: none;
  padding: 0 10px;
  box-sizing: border-box;
}
.AIinfo ul li {
  text-align: left;
  line-height: 1.7em;
}
.relative {
  position: relative;
}
.customer-sts {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 16px;
  padding-left: 20px;
  background: #f56c6c;
  color: #ffffff;
  border-radius: 0 4px 0 20px;
}

.group-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .group-item {
    padding: 10px 20px;
    border: 1px solid #ccc;
    margin-right: 20px;
    border-radius: 4px;
  }
}
.search {
  display: flex;
  margin-right: 10px;
}
.el-icon-video-play {
  cursor: pointer;
}
.top-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  .line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.el-tag {
  margin-right: 10px;
  margin-bottom: 6px;
}
.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  vertical-align: bottom;
  margin-bottom: 6px;
}
.contact-item {
  position: relative;
}
.button-box {
  position: absolute;
  right: 4px;
  top: 0;
}
</style>
